<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/birthdayRember'">
            <div class="vs-search-box">
                <div class="vs-table-box">
                    <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="110px">
                        <el-form-item label="">
                            <div style="width: 400px">
                                <el-input placeholder="请输入姓名或手机号或会员卡号" clearable v-model="paging.keys">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                    <template slot="append">
                                        <div style="cursor: pointer" @click="search()">查找会员</div>
                                    </template>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="查询时间段：" style="margin-left: 20px">
                            <el-date-picker popper-class="vs-picker-mm-dd" v-model="bill_time_start"
                                style="width: 300px" type="daterange" format="MM-dd" value-format="MM-dd"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                        </el-form-item>
                        <el-form-item class="">
                            <el-button @click="reset">重置</el-button>
                            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button type="primary" @click="editTemplate">短信编辑模板</el-button>
                    <!-- 发送短信这里有判断 的 三种 看设计图 -->
                    <el-button type="primary" @click="setSms()">发送短信</el-button>
                    <el-button v-if="utils.getIsShopowner()" icon="el-icon-download" type="primary"
                        @click="exportFile()">导出</el-button>
                </div>
            </div>
            <div class="vs-search-box">
                <el-table border ref="tableData" v-loading="loading" :data="tableData" style="width: 100%">
                    <el-table-column type="selection"> </el-table-column>
                    <el-table-column label="会员卡号" prop="vip_no"> </el-table-column>
                    <el-table-column label="姓名" prop="realname"> </el-table-column>
                    <el-table-column label="性别" prop="gender">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.gender == 1 ? '男' : '女' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" prop="phone"> </el-table-column>
                    <el-table-column label="生日" prop="birthday"> </el-table-column>
                    <el-table-column label="提醒日期">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.birthday | rtBrithday }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="提醒内容" prop="message" min-width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.message.length && scope.row.message[0]">{{
                                scope.row.message[0].content
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="109" label="操作" align="center">
                        <!-- 在那时没有查看详情接口  页面写了 等接口 -->
                        <!-- <template slot-scope="scope">
                            <span @click="setRow(scope.row)" class="tab-table-text">查看详情</span>
                        </template> -->
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="短信编辑模板" v-loading="loading2" :visible.sync="dialogVisible" width="600px"
            :before-close="dialogBeforeClose" style="text-align: center">
            <div class="dialog_body">
                <div>短信模板内容</div>
                <div class="d_body">
                    <el-input type="textarea" v-model="birthday_content" :rows="6" placeholder="">
                    </el-input>
                </div>
                <p class="vs-m-b-0">
                    <el-tag type="warning" size="small">{{ text }}</el-tag>
                    <span class="vs-m-l-10">为用户姓名</span>
                </p>
            </div>
            <div slot="footer" style="margin-top: 20px">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="subContent()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { join } from 'mock/user';
import { mapState } from "vuex"
export default {
    data() {
        return {
            text: "{{username}}",
            birthday_content: '',
            form: {},
            loading: false,
            loading2: false,
            bill_time_start: [],
            paging: {
                page: 1,
                limit: 100,
                total: 0,
                keys: '',
                end_date: '',
            },
            dialogVisible: false,
            tableData: [],
        };
    },
    created() {
        this.bill_time_start.push(this.$moment(new Date()).format('MM-DD'))
        this.bill_time_start.push(this.$moment(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).format('MM-DD'))
        this.getList();
    },
    computed: {
        ...mapState('user', ['userInfo']),
    },
    mounted() { },
    filters: {
        rtBrithday(val) {
            if (val) {
                return val.split('-')[1] + '-' + val.split('-')[2];
            }
            return val;
        },
    },
    methods: {
        async editTemplate() {
            this.loading2 = true;
            this.dialogVisible = true;
            console.log(this.userInfo.store, 'this.userInfo.store');
            let { code, data } = await this.$Http.getStoreShortMessage({ id: this.userInfo.store.id })
            this.loading2 = false;
            if (code) {
                this.birthday_content = data.birthday_message
            }
        },
        setRow(row) {
            //详情
            this.utils.goUrl('/SmsDetails');
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        //搜索
        search() {
            this.getList();
        },
        //更新短信模板
        async subContent() {
            let { code, data } = await this.$Http.setBirthdayContent({
                birthday_content: this.birthday_content,
            });
            if (code == 10000) {
                this.$message.success('短信模板编辑成功');
                this.dialogVisible = false;
            }
        },
        //导出文件
        async exportFile() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning('请选择您要导出的会员');
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            this.utils.exportFile('store/user/exportBirthday', '会员生日提醒列表', arr.join(','));
        },
        //发送短信
        async setSms() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning('请选择您要发送的会员');
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            let { code, data } = await this.$Http.setSms({
                ids: arr.join(','),
                type: 3, //3生日通知 ， 4 久未到店
            });
            if (code) {
                this.$message.success('发送成功!')
            }
        },
        //列表
        async getList() {
            let obj = Object.assign({}, this.paging);
            if (this.bill_time_start?.[0]) {
                obj.start_date = this.bill_time_start[0];
                obj.end_date = this.bill_time_start[1];
            } else {
                obj.start_date = '';
                obj.end_date = '';
            }
            this.loading = true;
            let { code, data } = await this.$Http.getBirthday(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-dialog__body {
        padding: 10px 20px;
        border-top: 1px solid rgba($color: #000000, $alpha: 0.2);
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.vs-table-box {
    display: flex;
}

.dialog_body {
    display: flex;
    flex-direction: column;
    text-align: left;

    >div:first-child {
        margin: 10px 0;
    }

    .d_body {
        display: flex;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        padding: 10px;

        >div:last-child {
            display: flex;
            flex-direction: column;
            margin: 0 20px;

            // .ipt_body {
            //   width: 250px ;
            //   height: 100px;
            //     border: 1px solid rgba($color: #000000, $alpha: .3);

            // }

            >div:last-child {
                margin-top: 20px;
                text-align: right;
            }
        }
    }
}
</style>
